<template>
  <div class="swiper-box">
    <div class="swiper-container-l swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-font">
          <div class="font-l iconrili iconfont"></div>
          <span class="font-w">每日推荐</span>
        </div>
        <div class="swiper-slide swiper-font">
          <div class="font-l iconfont icongedan"></div>
          <span class="font-w">歌单</span>
        </div>
        <div class="swiper-slide swiper-font" @click="FontRank">
          <div class="font-l iconfont iconpaixingbang"></div>
          <span class="font-w">排行榜</span>
        </div>
        <div class="swiper-slide swiper-font">
          <div class="font-l iconfont icondiantai"></div>
          <span class="font-w">电台</span>
        </div>
        <div class="swiper-slide swiper-font">
          <div class="font-l iconfont iconzhibo"></div>
          <span class="font-w">直播</span>
        </div>
        <div class="swiper-slide swiper-font">
          <div class="font-l iconfont iconhuo"></div>
          <span class="font-w">火钳留名</span>
        </div>
        <div class="swiper-slide swiper-font">
          <div class="font-l iconfont iconzhuanji"></div>
          <span class="font-w">数字专辑</span>
        </div>
        <div class="swiper-slide swiper-font">
          <div class="font-l iconfont iconhuatong"></div>
          <span class="font-w">唱聊</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    FontRank () {
      this.$router.push({
        path: '/rank'
      })
      this.setFindNoneq(true)
    },
    ...mapMutations({
      setFindNoneq: 'SET_FINDNONEQ_STATE'
    })
  },
  mounted () {
    var mySwiper = new Swiper('.swiper-container-l', {
      // 自动播放时间
      // autoplay: 3000,
      // 用户操作swiper之后，是否禁止autoplay。默认为true
      // autoplayDisableOnInteraction: false,
      // 循环播放
      // loop: true,
      // 滑动到底就开始翻页
      nested: true,
      // resistanceRatio: 0,
      // loopedSlides: 8,
      // slidesPerView: 'auto',
      // 启动动态检查器默认为false
      // observer: true,
      // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
      // observerParents: true,
      // 每组显示个数
      slidesPerView: 5
      // 分页器也就是小圆点
      // pagination: '.swiper-pagination'
    })
    console.log(mySwiper)
  }
}
</script>

<style scoped lang="less">
.swiper-container-l {
  margin-top: 6px;
}
.swiper-font {
  height: 88px;
  /*background-color: red;*/
  /*line-height: 68px;
  text-align: center;*/
  /*height: */
}
.font-l {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: red;
  margin: 8px auto;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
}
.font-w {
  display: block;
  font-size: 12px;
  text-align: center;
}
</style>
